﻿<?xml version="1.0" encoding="utf-8"?><Articles><Article><ArticlesID>860</ArticlesID><Title>Những điều cần tr&amp;#225;nh khi viết CSS</Title><Body>&amp;lt;p&amp;gt;Trong &amp;lt;a target=&amp;quot;_blank&amp;quot; href=&amp;quot;http://dev.meotom.net/2010/3/21/Can-ban-ve-CSS-35B.htm&amp;quot;&amp;gt;b&amp;amp;agrave;i trước&amp;lt;/a&amp;gt; ch&amp;amp;uacute;ng ta đ&amp;amp;atilde; được hiểu sơ qua về CSS&amp;amp;nbsp;trong b&amp;amp;agrave;i n&amp;amp;agrave;y ch&amp;amp;uacute;ng ta sẽ t&amp;amp;igrave;m hiểu tiếp những điều cần tr&amp;amp;aacute;nh khi viết CSS&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;B&amp;amp;agrave;i 2 - Những điều cần tr&amp;amp;aacute;nh khi viết CSS&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;Những điều cần tr&amp;amp;aacute;nh trong&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;khi viết m&amp;amp;atilde; HTML v&amp;amp;agrave; CSS nếu bạn muốn website của m&amp;amp;igrave;nh hiển thị tốt ở  hầu hết c&amp;amp;aacute;c browser.&amp;lt;br /&amp;gt;
&amp;lt;strong&amp;gt;&amp;lt;br /&amp;gt;
1. Kh&amp;amp;ocirc;ng bao giờ sử dụng padding cho c&amp;amp;aacute;c đối tượng c&amp;amp;oacute; độ rộng cố  định (fixed width)&amp;lt;/strong&amp;gt;&amp;lt;br /&amp;gt;
&amp;lt;br /&amp;gt;
Đ&amp;amp;acirc;y l&amp;amp;agrave; nguy&amp;amp;ecirc;n tắc cơ bản v&amp;amp;igrave; c&amp;amp;aacute;ch căn lề của  Internet Explorer kh&amp;amp;aacute;c với c&amp;amp;aacute;c tr&amp;amp;igrave;nh duyệt kh&amp;amp;aacute;c v&amp;amp;agrave; cũng l&amp;amp;agrave; 1 lỗi của  tr&amp;amp;igrave;nh duyệt n&amp;amp;agrave;y. Lỗi n&amp;amp;agrave;y được gọi l&amp;amp;agrave; &amp;amp;quot;Box Model Bug&amp;amp;quot; h&amp;amp;igrave;nh dưới l&amp;amp;agrave; một  h&amp;amp;igrave;nh ảnh minh họa cho lỗi n&amp;amp;agrave;y.&amp;lt;br /&amp;gt;
Bạn c&amp;amp;oacute; thể thấy rằng độ rộng của đối  tượng &amp;amp;quot;được&amp;amp;quot; cộng th&amp;amp;ecirc;m khi hiển thị ở IE nếu như c&amp;amp;oacute; padding. Vậy đơn  giản l&amp;amp;agrave; kh&amp;amp;ocirc;ng d&amp;amp;ugrave;ng padding cho c&amp;amp;aacute;c đối tượng c&amp;amp;oacute; độ rộng cố định (fixed  width).&amp;lt;br /&amp;gt;
&amp;lt;br /&amp;gt;
&amp;lt;strong&amp;gt;2. Cố định cỡ chữ bằng đơn vị % v&amp;amp;agrave; em&amp;lt;/strong&amp;gt;&amp;lt;br /&amp;gt;
&amp;lt;br /&amp;gt;
Th&amp;amp;ocirc;ng  thường c&amp;amp;aacute;c browser hiển thị cỡ chữ theo c&amp;amp;aacute;ch kh&amp;amp;aacute;c nhau nếu như bạn chưa  định cỡ cho ch&amp;amp;uacute;ng. Khi mới bắt đầu học CSS, ch&amp;amp;uacute;ng ta thường định dạng cỡ  chữ theo c&amp;amp;aacute;ch sau:&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
h1 {font-size:18px;}
h2 {font-size:16px;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;D&amp;amp;ograve;ng m&amp;amp;atilde; l&amp;amp;agrave; c&amp;amp;aacute;ch cơ bản, nhưng vấn đề l&amp;amp;agrave; ở IE người xem sẽ kh&amp;amp;ocirc;ng thể thay  đổi cỡ chữ. Điều n&amp;amp;agrave;y rất cần thiết với những người để độ ph&amp;amp;acirc;n giải cao.  Nhưng bạn đừng lo, c&amp;amp;oacute; một giải ph&amp;amp;aacute;p kh&amp;amp;aacute;c tốt hơn, h&amp;amp;atilde;y d&amp;amp;ugrave;ng % v&amp;amp;agrave; em để  định dạng cỡ chữ như sau:&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
body {font-size:62.5%;}
h1 {font-size:1.8em;}
h2 {font-size: 1.6em;}&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;3. Kh&amp;amp;ocirc;ng n&amp;amp;ecirc;n d&amp;amp;ugrave;ng đơn vị 100%&amp;lt;/strong&amp;gt;&amp;lt;br /&amp;gt;
&amp;lt;br /&amp;gt;
Sử dụng 100% để căn chiều rộng  của một đối tượng rất dễ gặp rủi ro trong việc bố tr&amp;amp;iacute; kết cấu của  website v&amp;amp;igrave; mỗi tr&amp;amp;igrave;nh duyệt hiển thị chiều rộng 100% rất kh&amp;amp;aacute;c biệt. Theo  kinh nghiệm bản th&amp;amp;acirc;n th&amp;amp;igrave; những lần thử định vị 100% th&amp;amp;igrave; gần như rất kh&amp;amp;oacute;  c&amp;amp;oacute; thể đạt được kết quả tốt nhất. H&amp;amp;atilde;y chọn một con số kh&amp;amp;aacute;c c&amp;amp;oacute; thể l&amp;amp;agrave; nhỏ  hơn 100% (95% c&amp;amp;oacute; thể sẽ tốt hơn). Hoặc đơn giản hơn l&amp;amp;agrave; h&amp;amp;atilde;y... cố định  n&amp;amp;oacute;.&amp;lt;br /&amp;gt;
&amp;lt;br /&amp;gt;
&amp;lt;strong&amp;gt;4. Kh&amp;amp;ocirc;ng d&amp;amp;ugrave;ng 0px để định chiều cao&amp;lt;/strong&amp;gt;&amp;lt;br /&amp;gt;
&amp;lt;br /&amp;gt;
C&amp;amp;aacute;c browser  kh&amp;amp;ocirc;ng th&amp;amp;iacute;ch việc bạn chọn 0px để định chiều cao cho đối tượng v&amp;amp;agrave; thưởng  hiển thị n&amp;amp;oacute; theo c&amp;amp;aacute;ch bạn... kh&amp;amp;ocirc;ng muốn ch&amp;amp;uacute;t n&amp;amp;agrave;o. Nếu c&amp;amp;oacute; thể h&amp;amp;atilde;y thay n&amp;amp;oacute;  bằng 1px sẽ tốt hơn rất nhiều.&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
height:1px;&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;5. Kh&amp;amp;ocirc;ng d&amp;amp;ugrave;ng &amp;amp;quot;&amp;amp;gt;&amp;amp;quot; trong CSS&amp;lt;/strong&amp;gt;&amp;lt;br /&amp;gt;
&amp;lt;br /&amp;gt;
M&amp;amp;igrave;nh đ&amp;amp;atilde; từng thấy c&amp;amp;oacute; người, thậm  ch&amp;amp;iacute; rất nhiều người viết m&amp;amp;atilde; CSS như sau:&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
#menubar&amp;amp;gt;a {color:#cccccc;}&amp;lt;/pre&amp;gt;
&amp;lt;p&amp;gt;Với d&amp;amp;ograve;ng m&amp;amp;atilde; CSS như tr&amp;amp;ecirc;n IE6 sẽ kh&amp;amp;ocirc;ng hiểu v&amp;amp;agrave; kh&amp;amp;ocirc;ng thể hiển thị được  định dạng tr&amp;amp;ecirc;n. H&amp;amp;atilde;y d&amp;amp;ugrave;ng đoạn m&amp;amp;atilde; dưới đ&amp;amp;acirc;y, sẽ an to&amp;amp;agrave;n hơn rất nhiều.&amp;lt;/p&amp;gt;
&amp;lt;pre class=&amp;quot;brush: css;&amp;quot; title=&amp;quot;code&amp;quot;&amp;gt;
#menubar a {color:#cccccc;}&amp;lt;/pre&amp;gt;
&amp;lt;p style=&amp;quot;text-align: right;&amp;quot;&amp;gt;&amp;lt;em&amp;gt;Sưu tầm&amp;lt;/em&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;amp;nbsp;&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;&amp;amp;nbsp;&amp;lt;/p&amp;gt;</Body><CommentEnabled>True</CommentEnabled><ViewCount>0</ViewCount><ReleaseDate>4/1/2010 9:36:33 AM</ReleaseDate><TotalComment>0</TotalComment><IsMedia>False</IsMedia><IsPicture>False</IsPicture><IsVote>True</IsVote><ArticlePassword /><PostVisible>0</PostVisible><ArticlePath>/2010/3/21/Nhung-dieu-can-tranh-khi-viet-CSS-35C</ArticlePath><Approved>True</Approved><ImagePath /><CategoryId>29</CategoryId><ArrayCatID>29|25</ArrayCatID></Article></Articles>